<template>
    <div class="search">
        <div class="homeimg"></div>
        <div class="home-container">
            <span class="el-icon-search"></span>
            <el-input placeholder="区块高度/区块哈希/交易哈希" v-model="inputVal" clearable @keydown.enter.native="search(inputVal)"></el-input>
        </div>
        <loading v-if="load"/>
        <div class="search-container" v-if="blockList">
            <table class="table table-hover table-bordered" v-loading="loading">
                <thead>
                    <tr>
                        <th>区块号</th>
                        <th>区块 hash</th>
                        <th>交易数量</th>
                        <th>打包时间</th>
                        <th>生成时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in blockList" :key="item.number">
                        <td>{{item.number}}</td>
                        <td><router-link :to="'/HashDetail/' + item.hash">{{item.hash}}</router-link></td>
                        <td>{{item.txCount}}</td>
                        <td>{{item.avgTime}}ms</td>
                        <td>{{item.writeTime | formatDate}}</td>
                    </tr>
                </tbody>
            </table>

            <el-pagination background layout="total, prev, pager, next, jumper" :pager-count="pagerCount" :total="allNum" :page-size="30" @current-change="goPage"></el-pagination>
        </div>
    </div>
</template>
<script>
import loading from './loading.vue'
export default {
    data: function () {
        return {
            load: true,
            page: this.$route.params.id,
            pagerCount: 8,
            allNum: "",
            blockList: null,
            inputVal: "",
            loading: false
        }
    },
    methods: {
        getMore: function () {
            this.$http.get("/api/blocks/page",{
                params:{
                    index: this.page,
                    pageSize: 30
                }
            }).then(data => {
                setTimeout(() => {
                    this.blockList = data.body.blocksSimpleResp;
                    this.allNum = data.body.count;
                    this.load = false;
                    this.loading = false;
                },500)
                
            }, err => {
                alert("获取数据出错:" + err.statusText)
            })
        },
        search: function (todo) {
            location.hash = "#/Search/" + todo;
        },
        goPage: function (val) {
            this.page = val;
            location.hash = "#/More/" + val;
            this.loading = true;
            setTimeout(() => {
                this.getMore();
            }, 500);
            
        }
    },
    created: function () {
       this.getMore()
    },
    filters:{
        formatDate: function (val) {
            return new Date(parseInt(val)/1000/1000).toLocaleString(); 
        }
    },
    components: {
        'loading': loading
    }
}
</script>
<style>
.search{
  width: 100%;
}
.search .homeimg{
  width: 100%;
  height: 200px;
  background: url("../assets/home-bg.png");
  position: absolute;
  z-index: 0;
}
.search .home-container{
  
  color: #c3c8cc;
  position: relative;
  width: 1000px;
  margin: 0 auto;
  height: 200px;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}
.search .home-container .el-input{
    top: 80px;

}
.home-container .el-input input{
    padding-left: 70px;
    padding-right: 48px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #c3c8cc;
    width: 800px;
    height: 64px;
    background-color: hsla(0,0%,100%,.1);
    border: 2px solid #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
}
.home-container .el-input .el-input__suffix{
  padding-right: 120px;
  margin-top: -8px;
}
.search .home-container .el-icon-search{
  font-size: 20px;
  position: absolute;
  top: 103px;
  left: 130px;
}
.search-container{
    width: 1000px;
    margin: 100px auto
}
</style>
